<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <style>
        body{
            background-color: #EDEDED;
            width: 100%;
            margin: 0;
            padding: 0;
        }
        .top-search{
            position: fixed;
            top: 0;
            background-color: #FDAB39;
            width: 100%;
            padding: 7.5pt 4%;
        }
        .search-detail{
            width: 77%;
            margin-left: 4%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            padding: 6pt 3% 6pt 4%;
            background-color: #FFFFFF;
            border-radius: 14.25pt;
        }
        .search-input{
            width: 65%;
            border: #FFFFFF 0 solid;
            height: 13pt;
            padding-left: 8pt;
        }
        .banner{
            width: 96%;
            margin: 46pt 2% 9pt 2%;
        }
        .top{
            width: 96%;
            margin: 9pt 2%;
            display: flex;
            flex-direction: row;
            background-color: #FFFFFF;
            padding: 10pt 0pt;
            border-radius: 10pt;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-top: 30pt;
        }
        .top-item{
            display: flex;
            flex-direction: column;
            padding: 5pt 8pt;
            font-size: 10pt;
            justify-content: center;
            align-items: center;
            width: 12%;
        }
        .recommend-column{
            margin: 9pt 2%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-end;
        }
        .recommend-left{
            width: 50%;
            height: 30pt;
            display: flex;
            flex-direction: column;
        }
        .recommend{
            margin: 9pt 2%;
            font-size: 20pt;
            font-weight: Bold;
        }
        .recommend-foot{
            margin: 9pt 2%;
            font-size: 20pt;
            border-top: #F39800 5.5pt solid;
            margin-top: -32pt;
            width: 80pt;
            z-index: -20;
        }
        .recommend-right{
            font-size: 12pt;
            color: #A0A0A0;
        }
        .store-list{
            margin: 9pt 2%;
        }
        .store-item{
            margin-top: 9pt;
            border-radius: 10pt;
            background-color: #FFFFFF;
        }
        .store-detail{
            padding: 9pt 11pt 7pt 8pt;
            display: flex;
            flex-direction: column;
        }
        .store-title{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }
        .discount{
            display: flex;
            align-self: flex-end;
            padding-top: 12pt;
            color: #D80C0C;
            font-size: 16pt;
            font-weight: bold;
        }
        .navigation{
            position: fixed;
            bottom: 0;
            background-color: #FFFFFF;
            width: 100%;
            height: 50pt;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        .navigation-item{
            width: 33.3%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: 10.5pt;
        }
        .navigation-checked{
            color: #F39800;
        }
        .font-overflow {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }


        /*清除边距*/
       div,ul,li{
           margin: 0;
           padding: 0;
       }
       /*首先准备一个放图片的容器*/
       .banner22{
           width: 96%;
           margin: -22pt 2% 9pt 2%;
           /* width: 500px; */
           height: 280px;
           position: relative;
           top: 100px;
           /*border: 1px solid #ccc;*/
       }
       /*图片样式*/
       .banner22 img{
           position: absolute;        /*把所有图片放在同一个位置*/
           width: 100%;
           transition-duration: 1s;    /*设置过渡时间*/
           opacity: 0;                /*把所有图片变透明*/
       }
       /*图片显示开关*/
       .banner22 img.on{
           opacity: 1;                /*用于显示图片*/
       }
       /*左右按钮 按钮用图片更好点,这里为了简便就用大于小于号*/
       .left, .right{
           position: absolute;
           top: 15%;
           width: 60px;
           height: 100px;
           line-height: 100px;
           opacity: 0.5;
           text-align: center;
           font-size: 30px;
           color: #ccc;
           display: none;    /*先隐藏按钮*/
           cursor: pointer;    /*设置鼠标悬停时的样式*/
       }
       .left{
           left: 0;
       }
       .right{
           right: 0;
       }
       .banner22:hover .left, .banner22:hover .right{
           display: block;            /*鼠标悬停才容器范围内时显示按钮*/
       }
       .left:hover, .right:hover{
           color: #fff;
       }
       /*焦点*/
       .banner22 ul{
           position: absolute;
           bottom: 0;
           max-width: 500px;
           padding: 5px 50px;
       }
       .banner22 ul li{
           list-style: none;    
           float: left;
           width: 1px;
           height: 1px;
           border-radius: 50%;
           margin-left: 10px;
           background-color: #ccc;
           cursor: pointer;
       }
       .banner22 ul li.active{
           background-color: #fff;        /*焦点激活时的样式*/
       }
    </style>
</head>
<body>
    <div class="top-search">
        <div class="search-detail">
            <input type="text" class="search-input" placeholder="搜索您需要的商家或服务">
            <img src="img/sousuo@2x.png" style="width: 15.5pt;height: 16pt;padding-right: 8pt;">
        </div>
    </div>
    <div class="navigation">
        <div class="navigation-item navigation-checked">
            <img src="img/shouye_3@2x.png" style="width: 21.5pt;height: 22pt;margin-bottom: 4pt;">
            <div>首页</div>
        </div>
        <div class="navigation-item">
            <img src="img/fenlei_5@2x.png" style="width: 24pt;height: 22pt;margin-bottom: 4pt;">
            <div>全部商家</div>
        </div>
        <div class="navigation-item">
            <img src="img/geren3@2x.png" style="width: 20pt;height: 22pt;margin-bottom: 4pt;">
            <div>我的</div>
        </div>
    </div>
    <div class="banner22">
        <img src="img/banner1@2x.png" style="width: 100%;">
        <img src="img/banner1@2x.png" style="width: 100%;">
        <img src="img/banner1@2x.png" style="width: 100%;">
        <!-- 左右按钮 -->
        <div class="left">&lt;</div>
        <div class="right">&gt;</div>
            
        <!-- 焦点 -->
        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class="top">
        <div class="top-item">
            <img src="img/家居@2x.png" style="width: 37pt;height: 37pt;">
            <span class="font-overflow">家居</span>
        </div>
        <div class="top-item">
            <img src="img/food@2x.png" style="width: 37pt;height: 37pt;">
            <span class="font-overflow">美食</span>
        </div>
        <div class="top-item">
            <img src="img/旅游@2x.png" style="width: 37pt;height: 37pt;">
            <span class="font-overflow">旅游</span>
        </div>
        <div class="top-item">
            <img src="img/汽车服务@2x.png" style="width: 37pt;height: 37pt;">
            <span class="font-overflow">汽车服务</span>
        </div>
        <div class="top-item">
            <img src="img/教育服务@2x.png" style="width: 37pt;height: 37pt;">
            <span class="font-overflow">教育服务</span>
        </div>
        <div class="top-item">
            <img src="img/合伙人@2x.png" style="width: 37pt;height: 37pt;">
            <span class="font-overflow">合伙人</span>
        </div>
        <div class="top-item">
            <img src="img/商家入驻@2x.png" style="width: 37pt;height: 37pt;">
            <span class="font-overflow">商家入驻</span>
        </div>
        <div class="top-item">
            <img src="img/娱乐生活@2x.png" style="width: 37pt;height: 37pt;">
            <span class="font-overflow">娱乐生活</span>
        </div>
        <div class="top-item">
            <img src="img/茶楼棋牌@2x.png" style="width: 37pt;height: 37pt;">
            <span class="font-overflow">茶楼棋牌</span>
        </div>
        <div class="top-item">
            <img src="img/全部@2x.png" style="width: 37pt;height: 37pt;">
            <span class="font-overflow">全部</span>
        </div>
    </div>
    <div class="banner" onclick="gotoSettled()">
        <img src="img/cachet_banner@2x.png" style="width: 100%;">
    </div>
    <div class="recommend-column">
        <div class="recommend-left">
            <span class="recommend">推荐商家</span><br/>
            <div class="recommend-foot">&emsp;&emsp;&emsp;&emsp;</div>
        </div>
        <div class="recommend-right">
            <span>更多</span>
            <img src="img/more5@2x.png" style="width: 10pt; height: 10pt;padding: 0 2pt;">
        </div>
    </div>
    <div class="store-list">
        <div class="store-item" onclick="gotoStore()">
            <img src="img/xia.jpg" style="width: 100%;border-radius: 10pt 10pt 0pt 0pt;">
            <div class="store-detail">
                <div class="store-title">
                    <div style="font-size: 16pt;font-weight: bold;">发明油焖大虾</div>
                    <div>
                        <img src="img/dianzan_2@2x.png" style="width: 10pt;height: 10pt;">
                        <span style="color: #FDAB39;font-size: 12pt;">256</span>
                    </div>
                </div>
                <div style="font-size: 10pt;padding-top: 9pt;">精选江湖鲜活璧山兔，口感鲜嫩，好吃嘴必打卡！</div>
                <div class="discount">专享9.5折优惠</div>
            </div>
        </div>
        <div class="store-item" onclick="gotoStore()">
            <img src="img/xia.jpg" style="width: 100%;border-radius: 10pt 10pt 0pt 0pt;">
            <div class="store-detail">
                <div class="store-title">
                    <div style="font-size: 16pt;font-weight: bold;">发明油焖大虾</div>
                    <div>
                        <img src="img/dianzan_2@2x.png" style="width: 10pt;height: 10pt;">
                        <span style="color: #FDAB39;font-size: 12pt;">256</span>
                    </div>
                </div>
                <div style="font-size: 10pt;padding-top: 9pt;">精选江湖鲜活璧山兔，口感鲜嫩，好吃嘴必打卡！</div>
                <div class="discount">专享9.5折优惠</div>
            </div>
        </div>
    </div>
    <div style="height: 50pt;"></div>
</body>
<script>
    function gotoStore() {
        window.location.href="store_index.html";
    }
    function gotoSettled() {
        window.location.href="store_settled.html";
    } 
    window.onload=function () {
        btnLeft.click();
    } 
</script>
<script type="text/javascript">
    //1、找到container下的所有img标签,li标签,左右按钮
    var aImgs = document.querySelectorAll('.banner22 img'); 
    var aLis = document.querySelectorAll('.banner22 li');
    var btnLeft = document.querySelector('.banner22 .left');
    var btnRight = document.querySelector('.banner22 .right');

    // //检验是否找到
    // console.log(aImgs);
    // console.log(aLis);
    // console.log(btnLeft);
    // console.log(btnRight);

    //点击事件
    //点击按钮图片切换
    var index = 0;        //当前图片下标
    var lastIndex = 0;
    btnRight.onclick = function(){
        //记录上一张图片的下标
        lastIndex = index;
        //清除上一张图片的样式
        aImgs[lastIndex].className = '';
        aLis[lastIndex].className = '';

        index++;
        index %= aImgs.length;    //实现周期性变化
        //设置当前图片的样式
        aImgs[index].className = 'on';
        aLis[index].className = 'active';
    }
    //左边按钮类似
    btnLeft.onclick = function(){
        //记录上一张图片的下标
        lastIndex = index;
        //清除上一张图片的样式
        aImgs[lastIndex].className = '';
        aLis[lastIndex].className = '';

        index--;
        if (index < 0) {
            index = aImgs.length - 1;
        }
        //设置当前图片的样式
        aImgs[index].className = 'on';
        aLis[index].className = 'active';
    }
</script>
</html>